<template>
    <el-card class="box-card">

        <el-dialog :title="modalType == 0 ? '添加商品' : '更新商品'" :visible.sync="dialogVisible" width="30%"
            :before-close="handleClose">

            <!-- 用户表单信息 -->
            <el-form :rules="rules" ref="addUserForm" :model="form" label-width="80px">
                <el-form-item label="商品名称" prop="username">
                    <el-input placeholder="请输入商品名称" v-model="form.goodsName"></el-input>
                </el-form-item>
                <el-form-item label="商品状态" prop="status">
                    <el-radio v-model="form.status" :label="0">上架</el-radio>
                    <el-radio v-model="form.status" :label="1">下架</el-radio>
                </el-form-item>
                <el-form-item label="商品所属分类" prop="name">
                    <!-- <el-input placeholder="请输入商品所属分类" v-model="form.typeId"></el-input> -->
                    <el-cascader v-model="form.typeName" :options="typeOptions" @change="handleChangeType"></el-cascader>
                </el-form-item>
                <el-form-item label="生产日期" prop="phone">
                    <div class="block">
                        <el-date-picker v-model="form.goodsBirthday" type="date" :picker-options="pickerOptions"
                            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="保质期（天）" prop="phone">
                    <el-input placeholder="请输入保质期" v-model="form.validTime"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="phone">
                    <el-input placeholder="请输入单价" v-model="form.price"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button>取 消</el-button>
                <el-button type="primary">确 定</el-button>
            </span>
        </el-dialog>

        <div style="margin-bottom: 15px;">
            <el-input v-model="pageInfo.searchName" style="width: 200px;" placeholder="请输入商品名称"></el-input>
            <el-button type="warning" style="margin-left: 10px;" icon="el-icon-search">查询</el-button>
            <el-button type="warning" style="margin-left: 10px;">清空</el-button>
            <el-button @click="dialogVisible = true" type="primary" style="margin-left: 10px;"
                icon="el-icon-circle-plus-outline">新增商品信息</el-button>
            <el-button type="success" style="margin-left: 10px;" icon="el-icon-printer">导出报表</el-button>
            <el-badge :value="12" style="margin-left: 10px;">
                <el-button size="small">商品库存预警</el-button>
            </el-badge>
        </div>
        <div class="common-tabel">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column fixed type="index" label="商品序号" width="180">
                </el-table-column>
                <el-table-column fixed prop="goodsName" label="商品名称" width="180">
                </el-table-column>
                <el-table-column prop="typeName" label="商品所属分类" width="180">
                </el-table-column>
                <el-table-column prop="goodsBirthday" label="生产日期" width="180">
                </el-table-column>
                <el-table-column prop="validTime" label="保质期（天）" width="180">
                </el-table-column>
                <el-table-column prop="price" label="单价（元）" width="180">
                </el-table-column>
                <el-table-column prop="manuName" label="商品生产商" width="180">
                </el-table-column>
                <el-table-column prop="stockNum" label="库存" width="180">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180">
                </el-table-column>
                <el-table-column fixed="right" width="150" label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">更新</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</template>

<script>
import Cookie from 'js-cookie'
import { getAllProductRequest, insertProductRequest, getProductByIdRequest, updateProductRequest, searchProductRequest, deleteProductRequest } from '@/api/product'
import { getAllTypeRequest } from '@/api/type'
import { getAllManufacturerRequest } from '@/api/manufacturer'

export default {
    name: 'ProductDetails',
    data() {
        return {
            dialogVisible: false,
            form: {
                goodsName: '小米手机',
                goodsImg: '',
                status: '',
                typeId: '',
                goodsBirthday: '',
                validTime: '360',
                price: '3999.9',
                manuName: ''
            },
            goodsImg: '',   //  用于图片回显
            rules: {
                goodsName: [
                    { required: true, message: "请输入商品名称" }
                ],
                typeId: [
                    { required: true, message: "请输入商品类型" }
                ],
                validTime: [
                    { required: true, message: "请输入保质期" }
                ],
                price: [
                    { required: true, message: "请输入单价" }
                ],
                manuName: [
                    { required: true, message: "请输入生产商名称" }
                ]
            },
            //  商品类型名称所对应的级联框的内容
            typeOptions: [{
                value: '',
                label: ''
            }],
            //  商品生产商名称所对应的级联框的内容
            manuOptions: [{
                value: '',
                label: ''
            }],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            tableData: [],
            modalType: 0,  // 0表示新增的弹窗，1表示更新的弹窗
            goodsName: '',  //  用户输入的需要查询的商品名称
            //  分页数据
            pageInfo: {
                currentPage: 1,  //  当前页数
                pageSize: 5,  //  页面显示数量
                total: 0,  //  总条目数
                searchName:''
            }
        };
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handleAvatarSuccess(){},
        handleChangeType(){},
        //  修改商品信息
        handleEdit(row) {
            this.modalType = 1
            this.dialogVisible = true

            //  根据id
            getProductByIdRequest(row.goodsId).then((res) => {
                if (res.data.code == 20041) {
                    this.form = res.data.data
                }
                else {
                    this.errorMsg(res.data.data)
                }
            })
        },
        //  成功消息
        successMsg(msg) {
            this.$message({
                message: msg,
                type: 'success'
            });
        },
        //  错误消息
        errorMsg(msg) {
            this.$message({
                message: msg,
                type: 'warning'
            });
        },
    },
    mounted() {
    },
    created() {
        
    },
    computed: {
    }
}
</script>

<style lang="less" scoped>
.box-card {
    height: 90%;


    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .manage-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

    }

    .common-tabel {
        position: relative;
        height: (calc(100% - 62px));

        el-image {
            width: 60px;
            height: 60px;
        }

        // .pager {
        //     position: absolute;
        //     bottom: 0;
        //     right: 20px;
        // }
    }
}
</style>